<%--
  Created by IntelliJ IDEA.
  User: 15813315065
  Date: 2020/6/4
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/fronted/register.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <style>
        .pl60 {
            padding-left: 60px;
        }
        .mgt20 {
            margin-top: 20px;
        }
        .common-index {
            height: 24px;
            width: 24px;
            display: inline-block;
        }
        .active-index {
            background: url("images/reg-icon.png") no-repeat 0 0;
        }
        .step-index {
            line-height: 24px;
            font-weight: 700;
            color: #ffffff;
            background: url("images/reg-icon.png") no-repeat 0 -200px;
        }
        .active {
            background-color: #21cb91;
        }
        div.process-label p.active {
            background-color: white;
            color: #21cb91;
        }
        .common-pointer {
            height: 10px;
            width: 140px;
            position: absolute;
        }
        div.pointer {
            background: url("images/reg-icon.png") no-repeat 0 -100px;
        }
        .active-pointer {
            background: url("images/reg-icon.png") no-repeat 0 -130px;
        }
        .line-1 {
            top: 7px;
            left: 73px;
        }
        .line-2 {
            top: 7px;
            left: 241px;
        }
        div.process-label {
            width: 100px;
            text-align: center;
        }
        div.other-label {
            margin-left: 69px;
        }
        div.process-label p{
            margin-bottom: 0;
            padding-top: 15px;
        }
        h3.success-text{
            color: #21cb91;
            text-align: center;
        }
        .username-success {
            color: forestgreen;
            position: absolute;
            top: 34px;
            right: 6px;
            display: none;
        }

        #adderrmsg{
            border-radius:5px;
            height: 20px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.jsp" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-push-3 col-xs-12 pl60">
            <!-- 控制注册导航 -->
            <div style="display: flex; flex-direction: row; position: relative;">
                <div class="process-label">
                    <span class="common-index step-index">1</span>
                    <p class="active">验证手机号</p>
                </div>
                <div class="common-pointer pointer line-1"></div>
                <div class="process-label other-label">
                    <span class="common-index step-index">2</span>
                    <p class="info-text">填写账号信息</p>
                </div>
                <div class="common-pointer pointer line-2"></div>
                <div class="process-label other-label">
                    <span class="common-index step-index">3</span>
                    <p class="info-text">注册成功</p>
                </div>
            </div>
        </div>
    </div>
    <div  id="phonePanel" class="row mgt20">
        <!-- 电话的form表单 --->
        <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
            <form onsubmit="javascript: return false;">
                <div id="adderrmsg" class="alert alert-danger hide" >
                    <!--
                        对于警告框来说：data-dismiss="alert"是固定值，但是需要引入js.
                     -->
                    <button id="btn" class="close" data-dismiss="alert">&times;</button>
                    <span id="registerErrorMsg"></span>
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" autocomplete="off" id="phone" class="form-control">
                </div>
                <div class="form-group">
                    <label for="validateCode">验证码</label>
                    <div class="input-group">
                        <input type="text" autocomplete="off" id="validateCode" class="form-control">
                        <!--  cursor: pointer; 将鼠标的形状改为手状。-->
                        <span class="input-group-addon" id="secondCountDown" style="cursor: pointer;">获取验证码</span>
                    </div>
                </div>
                <div>
                    <button onclick="gotoNext()" class="btn btn-block btn-danger">下一步</button>
                </div>
            </form>
        </div>
    </div>
    <div id="otherInfoPanel" class="row mgt20" style="display: none;">
        <!-- 其他信息的form表单 -->
        <div class="col-sm-6 col-sm-push-3 col-xs-8 col-xs-push-2">
            <form id="remainInfoForm" onsubmit="javascript: return false;">
                <div class="form-group" style="position: relative;">
                    <label for="username">用户名(必须以字母开头,中间不能包含特殊符号(!、@、#、$、%、&、*(、)): </label>
                    <input type="text" autocomplete="off" class="form-control" name="username" id="username">
                    <i id="success-icon" class="fa fa-check username-success"></i>
                </div>
                <div class="form-group">
                    <label for="password">密码（密码必须由3-20个字母、数字、下划线组成）</label>
                    <input type="password" id="password" name="password" class="form-control">
                </div>
                <div class="form-group">
                    <label for="repassword">重复密码</label>
                    <input type="password" id="repassword" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="text" autocomplete="off" name="email" id="email" class="form-control">
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <div>
                        <label>
                            <input type="radio" checked name="gender" value="F"> 女
                        </label>
                        <label>
                            <input type="radio" name="gender" value="M"> 男
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <button onclick="submitToRegister()" class="btn btn-block btn-danger">立即注册</button>
                </div>
            </form>
        </div>
    </div>
    <div id="successPanel" class="row mgt20" style="display: none;">
        <h3 class="success-text">恭喜你, 注册成功!</h3>
        <p style="text-align: center;" id="gotoText">页面将在 <span style="color: red;" id="countdownSecond"></span>s 之后, 返回上一次访问的页面. </p>
    </div>
</div>




</body>
<script>

    var flag=true;



    //用户输入电话号码后，验证电话号码
    $('#phone').blur(function () {
        var phone = $('#phone').val();
        console.log(phone)
        var reg = /^1(44|47|91|99|73|76|77|[358]\d)\d{8}$/;
        if(!reg.test(phone)) {
            showErrorBox('电话号码错误，请填写正确的电话号码.')
            // $('#registerErrorMsg').html('电话号码错误，请填写正确的电话号码.')
            // $('#adderrmsg').attr("class","alert-danger")
        }
    })


    // 在电话面板，点击下一步的按钮,验证手机号和验证码
    function gotoNext() {
        // var flag;
        var phone = $('#phone').val(); //获取手机号
        var validateCode = $('#validateCode').val(); //获取验证码

        var reg = /^1(44|47|91|99|73|76|77|[358]\d)\d{8}$/;
        if(!reg.test(phone)) {

            showErrorBox('请填写正确手机号码.')
            // $('#registerErrorMsg').html('请填写正确手机号码.')
            // $('#phoneRegisterError').show();
            // flag=false;
        }else {
            $.ajax({
                url: 'PhoneRegister',
                type: 'POST',
                data: {phone: phone, validateCode: validateCode},
                dataType: 'json',
                success: function(data) {
                    console.log(data.code)
                    console.log(typeof(data.code));
                    console.log(data.code<0)
                    if (data.code<0){
                        // alert(data.msg);
                        // console.log(data.msg)

                        // showErrorBox('请填写正确手机号码.')

                        $('#registerErrorMsg').html(data.msg)
                        // $('#phoneRegisterError').show();

                        $('#adderrmsg').attr("class","alert-danger")

                        return;
                    }else {
                        RegisterPanel.changePhoneLabel();
                    }
                }
            })
        }



    }

    // 点击 "立即注册" 按钮
    function submitToRegister() {
        var username = $("#username").val();
        var password = $("#password").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var sex = $('input:radio:checked').val();
        console.log("checkUsername+checkPassword+checkEmail"+checkUsername+checkPassword+checkEmail)

        if (flag) {
            if (checkUsername!=null && checkPassword!=null  && checkEmail!=null ) {
                $.ajax({
                    url:"registerController",
                    type:"POST",
                    data:{username:username,password:password,email:email,phone:phone,sex:sex},
                    dataType:"json",
                    success:function (data) {
                        console.log("data.code"+data.code)
                        if (data.code==1){
                            RegisterPanel.changeOtherInfoLabel();
                            if (document.referrer){
                                time(5)
                            }else {
                                $('#gotoText').hide();
                            }
                        }
                    }})
            }else {
                showErrorBox('请填写正确信息.')
            }
        }else {
            showErrorBox("用户名已存在，请重新输入用户名")
        }
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

    /**
     * 1.首先页面一进来要给获取验证的span绑定一个事件。
     * 2.当用户点击获取验证的时候，然后点击事件无效(解绑点击事件); 将背景颜色变浅色; 开始进入倒计时；
     * 3.当倒计时完毕之后, 重新绑定事件。
     */
    function getValidateCode() {
        $('#secondCountDown').unbind('click'); //解除绑定的事件。
        $('#secondCountDown').css('background-color', '#ffffff'); // 将背景颜色变为白色
        countSeconde(60); //开始进入倒计时

        var phone = $('#phone').val();
        console.log(phone)

        var reg = /^1(44|47|91|99|73|76|77|[358]\d)\d{8}$/;

        if(!reg.test(phone)) {
            // $('#registerErrorMsg').html('请填写正确手机号码.')
            // $('#phoneRegisterError').show();
            // // return;
        }

        $.ajax({
            url: 'getValidateCode',
            type: 'post',
            data: {phone: phone},
            dataType: 'json',
            success: function(data) {
                console.log(data);
            }
        })
    }
    //给获取验证码的span绑定事件
    $('#secondCountDown').on('click', getValidateCode)


    $('#btn').on('click', close)

    // 当电话号码与验证码获得较的时候，将错误信息影藏
    $('#btn').focus(function() {
        // $('#adderrmsg').hide();
    })

    // 倒计时, 方法参数num是倒计时的时间，单位是s
    function countSeconde(num) {
        if(num > 0) { // 一直倒计时
            num--;
            $('#secondCountDown').html('剩余(' + num + "s)");
            // 每过一秒重新执行该方法
            setTimeout(() => {
                countSeconde(num);
        }, 1000);

        }else {  //表示已经倒计时完毕
            $('#secondCountDown').html('重新获取');
            $('#secondCountDown').on('click', getValidateCode); //重新绑定
            $('#secondCountDown').css('background-color', '#cccccc');
        }
    }

    function close() {
        $('#adderrmsg').attr("class","alert-danger hide");

    }


    $('#username').focus(function() {
        $('#success-icon').hide();
    });
    /**
     * 当用户名输入框失去焦点的时候，要验证两点：
     *      1.用户名不能为空.
     *      2.用户名不能重复.
     */


    //验证用户名
    $('#username').blur(function() {

        var username = $(this).val();  //获取用户名的值
        console.log(!username)
        if(!username || "" == username.trim()) {
            showErrorBox('用户不能为空.')
            return;
        }else {
            checkUsername=username;
        }

        var wordReg = /^[a-zA-Z]+/;  //必须以字母开头
        var specialReg = /[`~!@#$^&*()=|{}':;',\[\].<>?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/;  //特殊字符验证

        // 字母不是以字母开头，并且中间包含特殊字符
        if(!wordReg.test(username) || specialReg.test(username)) {
            showErrorBox('用户格式不对,请重新填写')
            return;
        }else {
            flag=true;
        }

        // 验证用户名是否重复
        // console.log("验证用户名是否重复")
        $.ajax({
            url: 'checkUser',
            data: {username: username},
            type: 'POST',
            dataType: 'json',
            success: function(_data) {
                // 后台验证用户名有问题
                // alert(_data.msg)
                // console.log("success")
                if(_data.code < 0) {
                    showErrorBox(_data.msg);
                    flag=false;
                    // alert(_data.msg)
                }else { //验证成功
                    $('#success-icon').show();
                }
            }
        })
    })

    //验证密码
    $('#password').blur(function() {

        var password = $(this).val();  //获取用户名的值
        console.log(password);
        // //密码由只能输入6-20个字母、数字、下划线
        var patrn=/^(\w){3,20}$/;

        if(!patrn.test(password)){
            showErrorBox('密码格式不正确.')
        }
        // if (password==null || "" == password.trim()){
        //     showErrorBox('密码不能为空.')
        // }
    })

    //重复密码验证

    $('#repassword').blur(function() {

        var password = $(this).val();  //获取用户名的值
        var repassword = $('#password').val();  //获取用户名的值

        if(password!=repassword){
            showErrorBox('两次密码不一致.')
        }else {
            checkPassword=password;
        }

    })

    //验证邮箱
    $('#email').blur(function() {

        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        var email = $("#email").val(); //要验证的对象
        console.log(email);
        console.log(reg.test(email));
        if(!reg.test(email)){
            showErrorBox('邮箱不正确.')
        }else {
            checkEmail=email;
        }
    })

// 注册成功后的倒计时
    function time(num) {
        if(num > 0) {
            num--;
            $('#countdownSecond').html(num);
            setTimeout(() => {
                time(num);
        }, 1000);
        }else {
            // 跳转到上一次的页面
            window.location.href = document.referrer;
        }

    }



</script>
</html>
